<#macro list_pane_controls i18n id="" parentId="" class="" resultCount=0 pageIdx=1 pageCount=0 pageSize=10 pageSizeSmall=10 pageSizeMedium=20 pageSizeLarge=30>
<#escape x as x?html>
	<#assign pageSizeSmallClass = "" />
	<#if pageSize == pageSizeSmall>
		<#assign pageSizeSmallClass = "uic-link-push-on" />
	</#if>

	<#assign pageSizeMediumClass = "" />
	<#if pageSize == pageSizeMedium>
		<#assign pageSizeMediumClass = "uic-link-push-on" />
	</#if>

	<#assign pageSizeLargeClass = "" />
	<#if pageSize == pageSizeLarge>
		<#assign pageSizeLargeClass = "uic-link-push-on" />
	</#if>

	<table id="${id}" class="${class}">
		<tr>
			<td class="uic-paginated-tbl-result-count">
				<div class="uic-paginated-tbl-result-count-lbl">${resultCount} ${i18n("lblResultCountSuffix")}</div>
			</td>
			<td class="uic-paginated-tbl-navigation">
				<@button id=id+"_btnFirst" class="uic-list-pane-nav-button" primaryIcon="uic-icon-arrowthick-1-w" secondaryIcon="uic-icon-arrowthick-1-w" displayText=false  />
				<@button id=id+"_btnPrevious" class="uic-list-pane-nav-button" primaryIcon="uic-icon-arrowthick-1-w" displayText=false  />
				<div class="uic-list-navigation-page-index-pane">
					<div class="uic-list-navigation-text ">${i18n("lblPage")}</div>
					<div style="display:inline-block;"><@textfield id=id+"_txtPageIndex" class="uic-list-navigation-page-index" maxlength=10 regex="^\\d+$" value=pageIdx?string /></div>
					<div class="uic-list-navigation-text">${i18n("lblOf")} ${pageCount}</div>
				</div>
				<@button id=id+"_btnNext" class="uic-list-pane-nav-button" primaryIcon="uic-icon-arrowthick-1-e"  displayText=false/>
				<@button id=id+"_btnLast" class="uic-list-pane-nav-button" primaryIcon="uic-icon-arrowthick-1-e" secondaryIcon="uic-icon-arrowthick-1-e"  displayText=false />
			</td>
			<td class="uic-paginated-tbl-page-size">
				<div class="uic-paginated-tbl-page-size-wrapper">
					<input id="${id}_btnPageSizeSmall"  name="${id}_btnPageSize"  data-value="${pageSizeSmall}"  type="radio" checked="checked"><label for="${id}_btnPageSizeSmall">${pageSizeSmall}</label></input>
					<input id="${id}_btnPageSizeMedium" name="${id}_btnPageSize" data-value="${pageSizeMedium}" type="radio" ><label for="${id}_btnPageSizeMedium">${pageSizeMedium}</label></input>
					<input id="${id}_btnPageSizeLarge"  name="${id}_btnPageSize"  data-value="${pageSizeLarge}" type="radio" ><label for="${id}_btnPageSizeLarge">${pageSizeLarge}</label></input>
				</div>
			</td>
		</tr>
	</table>
	<script type="text/javascript">
		$("#${id}_btnFirst").bind('click', function(){
			var event = jQuery.Event("list-pane-page-index");
			event.value = 1;
			$("#${parentId}").trigger(event);
		} );

		$("#${id}_btnPrevious").bind('click', function(){
			var event = jQuery.Event("list-pane-page-index");
			event.value = ${pageIdx} - 1;
			$("#${parentId}").trigger(event);
		} );

		$("#${id}_btnNext").bind('click', function(){
			var event = jQuery.Event("list-pane-page-index");
			event.value = ${pageIdx} + 1;
			$("#${parentId}").trigger(event);
		} );

		$("#${id}_btnLast").bind('click', function(){
			var event = jQuery.Event("list-pane-page-index");
			event.value = ${resultCount};
			$("#${parentId}").trigger(event);
		} );

		$("#${id}_txtPageIndex").bind('change', function(){
			$("#${parentId} .uic-list-navigation-page-index input").val( $(this).val() );
			var event = jQuery.Event("list-pane-page-index");
			event.value = parseInt($(this).val());
			$("#${parentId}").trigger(event);
		} );

		$("#${id}_btnPageSizeSmall").parent().buttonset();
		$("#${id}_btnPageSizeSmall").click(function(event){
			var event = jQuery.Event("list-pane-page-size");
			event.value = ${pageSizeSmall};
			$("#${parentId}").trigger(event);
		});

		$("#${id}_btnPageSizeMedium").click(function(event){
			var event = jQuery.Event("list-pane-page-size");
			event.value = ${pageSizeMedium};
			$("#${parentId}").trigger(event);
		});

		$("#${id}_btnPageSizeLarge").click(function(event){
			var event = jQuery.Event("list-pane-page-size");
			event.value = ${pageSizeLarge};
			$("#${parentId}").trigger(event);
		});


	</script>
</#escape>
</#macro>
<#macro list_pane i18n rows columns id="" class="" title="" resultCount=0 pageIdx=1 pageCount=0 pageSize=10 pageSizeSmall=10 pageSizeMedium=20 pageSizeLarge=30>
	<#escape x as x?html>
		<div id="${id}" class="uic-list-pane ${class}">
			<@list_pane_controls
					id=id+"_top"
					parentId=id
					i18n=i18n
					class="uic-paginated-tbl-controls"
					resultCount=resultCount
					pageIdx=pageIdx
					pageCount=pageCount
					pageSize=pageSize
					pageSizeSmall=pageSizeSmall
					pageSizeMedium=pageSizeMedium
					pageSizeLarge=pageSizeLarge />
			<div class="uic-tbl-title">${title}</div>
			<div class="uic-tbl-viewport">
				<@table id=id+"_table" multiRowSelection=true sortable=true dragndrop=true columns=columns rows=rows  />
			</div>
	        <@list_pane_controls
	                id=id+"_bottom"
					i18n=i18n
					parentId=id
					class="uic-paginated-tbl-controls-bottom"
					resultCount=resultCount
					pageIdx=pageIdx
					pageCount=pageCount
					pageSize=pageSize
					pageSizeSmall=pageSizeSmall
					pageSizeMedium=pageSizeMedium
					pageSizeLarge=pageSizeLarge />

			<script type="text/javascript">

			</script>
		</div>
	</#escape>
</#macro>

